<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
  <!-- 必须的 meta 标签 -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <title>GameHub商城</title>
  <!-- Bootstrap 的 CSS 文件 -->
  <link rel="stylesheet" href="../font/stylesheet.css">
  <link rel="stylesheet" href="../css/bootstrap.min.css" >
  <link rel="stylesheet" href="../css/global.css">
  <link rel="stylesheet" href="../css/regest.min.css">
  <script src="../js/jquery-3.5.1.min.js" ></script>
  <script src="../js/bootstrap.bundle.js"></script>
  <script>
    var pattern_name = /^(?!.*[_\-\.]{2})[\w.%+-]{3,16}$/;
    // var pattern_password = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/;
    var pattern_password = /([a-zA-Z0-9_-])+/;
    var pattern_email = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
    var password_flag = false; email_flag = false; name_flag = false; repeat_flag = false; read_flag = false;code_flag = false;name_repeat = false;
    function changeCode(){
    	var date = new Date()
    	var $img = $("#checkcodeImg")
    	$img.attr('src','${pageContext.request.contextPath}/checkCodeServlet?id='+date)

    }
    function change(obj) {
      var block = obj.querySelector(".d-block");
      var none = obj.querySelector(".d-none");
      none.setAttribute("class",none.getAttribute("class").replaceAll("d-none","d-block"));
      block.setAttribute("class",block.getAttribute("class").replaceAll("d-block","d-none"));
      var input = obj.parentNode.querySelector("input");
      if(none.getAttribute("class").indexOf("slash") !== -1){
        input.setAttribute("type","password");
      }else {
        input.setAttribute("type","text");
      }
    }
    function boxfocus(obj){
      var div = obj.parentNode.parentNode.getElementsByTagName("label")[0];  
      var fieldset = obj.parentNode.getElementsByTagName("fieldset")[0];
      var p = obj.parentNode.parentNode.parentNode.getElementsByTagName("p")[0];
      div.setAttribute("class",div.getAttribute("class")+" inputactive");
      fieldset.setAttribute("class",fieldset.getAttribute("class").replaceAll(" fieldset-warning",""));
      p.innerHTML = "";
    }
    function boxblur(obj){
		
      var div = obj.parentNode.parentNode.getElementsByTagName("label")[0];
      var fieldset = obj.parentNode.getElementsByTagName("fieldset")[0];
      var p = obj.parentNode.parentNode.parentNode.getElementsByTagName("p")[0];
      if(obj.id == "information"){
        read_flag = obj.checked;
        can_submit();
      }
/*      else if(obj.id =="checkcode"){
    	if(!obj.value){
    		fieldset.setAttribute("class",fieldset.getAttribute("class")+" fieldset-warning")
            div.setAttribute("class",div.getAttribute("class").replaceAll(" inputactive",""));
    	}else {
	        $.get("${pageContext.request.contextPath}/checkcode/checkCode?","code="+$("#checkcode").val(),function(data){
     	  		if(data == true) {
     	  			code_flag = true
     	  		}else {
     	  			fieldset.setAttribute("class",fieldset.getAttribute("class")+" fieldset-warning")
     	  			p.innerHTML = "验证码错误";
 	  				code_flag = false
     	  		}
 	  			can_submit();
	      	},"json")
    	}
      }*/
      else if(!obj.value){
        fieldset.setAttribute("class",fieldset.getAttribute("class")+" fieldset-warning")
        div.setAttribute("class",div.getAttribute("class").replaceAll(" inputactive",""));

        switch(obj.id){
          case "username":
            name_flag = false;
            p.innerHTML = "用户名不能为空";
            break;
          case "password":
            password_flag = false;
            p.innerHTML = "密码不能为空"
            break;
          case "password-repeat":
            password_flag = false;
            p.innerHTML = "密码不能为空"
            break;
          case "email":
            email_flag = false;
            p.innerHTML = "邮箱不能为空"
            break;
/*          case "checkcode":
              email_flag = false;
              p.innerHTML = "验证码不能为空"
              break;*/
        }
      }else {
        if(obj.id == "password-repeat"){
          if(obj.value != document.getElementById("password").value){
            repeat_flag = false;
            p.innerHTML = "前后密码不一致";
            fieldset.setAttribute("class",fieldset.getAttribute("class")+" fieldset-warning")
        }else {
            repeat_flag = true;
            if(!check(obj)){
              password_flag = false;
              p.innerHTML = "密码不合法";
            }
          }
          var button = document.getElementById("regest-button")
          button.setAttribute("disabled","");
        }
        var flag = check(obj)
        if(!flag){
          fieldset.setAttribute("class",fieldset.getAttribute("class")+" fieldset-warning")
          switch(obj.id){
            case "username":
              p.innerHTML = "用户名不合法";
              break;
            case "password":
              p.innerHTML = "密码不合法"
              break;
            case "email":
              p.innerHTML = "邮箱不合法"
              break;
          }
          var button = document.getElementById("regest-button")
          button.setAttribute("disabled",""); 
        }else {
            if(obj.id == 'username'){
                var username = $('#username').val()
                $.get("${pageContext.request.contextPath}/UserController/Users/"+username,"",function(data){
                  // alert(data.code)
                  if(data.code==500){
                	  name_repeat = false;
                	  fieldset.setAttribute("class",fieldset.getAttribute("class")+" fieldset-warning")
                	  p.innerHTML = "用户名重复";
               		}else {
               			name_repeat = true
               		}
                  can_submit();
    		    },"json")
            }else {
            	can_submit();
            }
          
        }
      }
    }
    function can_submit() {
      var button = document.getElementById("regest-button")
      read_flag = document.getElementById("information").checked;
      // alert(password_flag+','+email_flag+','+name_flag+','+repeat_flag+','+read_flag+','+name_repeat)
      if(password_flag&&email_flag&&name_flag&&repeat_flag&&read_flag&&name_repeat){
        button.removeAttribute("disabled");
      }else {
        button.setAttribute("disabled","");
      }
    }
    function check(obj) {
      if(!obj.value){
        return false;
      }else {
        var flag
        switch(obj.id){
          case "username":
            flag = pattern_name.test(obj.value);
            name_flag = flag;
            break;
          case "password":
            flag = pattern_password.test(obj.value);
            password_flag = flag;
            break;
          case "password-repeat":
            flag = pattern_password.test(obj.value);
            // flag = obj.value == document.getElementById("password").value;
            break;
          case "email":
            flag = pattern_email.test(obj.value);
            email_flag = flag;
            break;

      	}
        return flag;
      }
    }

    function regest(){
      var user = {
        "username" : $("#username").val(),
        "password" : $("#password").val(),
        "email" : $("#email").val(),
        "phonenumber" : $("#phonenumber").val()
      }
      alert(JSON.stringify(user))
      $.ajax({
        type:"POST",
        url:"${pageContext.request.contextPath}/UserController/Users",
        contentType: "application/json",
        dataType: "json",
        data:JSON.stringify(user),
        success:function (data) {
            alert(data.message)
        }
      })
      window.location.href="${pageContext.request.contextPath}/jsp/login.jsp"

    }
  </script>
</head>
<body>
  <div class="container h-100">
    <div class="row h-100 position-relative">
      <div class="col p-0 d-flex flex-column align-items-center justify-content-center">
        <main class="main flex-shrink-0 flex-grow-0 rounded ">
          <div class="d-flex flex-column align-items-center ">
            <img src="../img/logo.png" class="logo" alt="">
            <h2>注册</h2>
            <div  class="d-flex flex-column align-items-center justify-content-between box">
              <section>
                <div class="position-relative input box" id="func">
                  <label for="username" class="position-absolute label" id="labelid">用户名</label>
                  <div class="position-relative d-flex">
                    <input id="username" class="flex-grow-1" type="text" name="username" onclick="boxfocus(this)" onclick="boxfocus(this)" onblur="boxblur(this)">
                    <div class="hint text-white align-self-center d-flex justify-content-center align-items-center rounded">
                      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-exclamation-square" viewBox="0 0 16 16">
                        <path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/>
                        <path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z"/>
                      </svg>
                      <div class="tips position-absolute rounded">您的名称必须在3-16个字符之间，可以包含字母、数字以及非连续的破折号、句号、下划线和空格。</div>
                    </div>
                    <fieldset class="position-absolute rounded" aria-hidden="true"></fieldset>
                  </div>
                </div>
                <p class="position-absolute warning"></p>
              </section>
              <section>
                <div class="position-relative input box">
                  <label for="password" class="position-absolute label" id="labelid">密码</label>
                  <div class="position-relative  d-flex">
                    <input id="password" class="flex-grow-1" type="password" name="password" onfocus="boxfocus(this)" onclick="boxfocus(this)" onblur="boxblur(this)">

                    <div class="hint text-white align-self-center d-flex justify-content-center align-items-center rounded position-relative" onclick="change(this)">        
                      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-eye-fill position-absolute d-none" viewBox="0 0 16 16">
                        <path d="M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0z"/>
                        <path d="M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8zm8 3.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z"/>
                      </svg>
                      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-eye-slash-fill position-absolute d-block" viewBox="0 0 16 16">
                        <path d="m10.79 12.912-1.614-1.615a3.5 3.5 0 0 1-4.474-4.474l-2.06-2.06C.938 6.278 0 8 0 8s3 5.5 8 5.5a7.029 7.029 0 0 0 2.79-.588zM5.21 3.088A7.028 7.028 0 0 1 8 2.5c5 0 8 5.5 8 5.5s-.939 1.721-2.641 3.238l-2.062-2.062a3.5 3.5 0 0 0-4.474-4.474L5.21 3.089z"/>
                        <path d="M5.525 7.646a2.5 2.5 0 0 0 2.829 2.829l-2.83-2.829zm4.95.708-2.829-2.83a2.5 2.5 0 0 1 2.829 2.829zm3.171 6-12-12 .708-.708 12 12-.708.708z"/>
                      </svg>
                    </div>

                    <div class="hint text-white align-self-center d-flex justify-content-center align-items-center rounded position-relative">        
                      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-exclamation-square" viewBox="0 0 16 16">
                        <path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/>
                        <path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z"/>
                      </svg>
                      <div class="tips position-absolute rounded">密码至少为8位，并且至少包含1个数字、1个大写字母和1个小写字母</div>
                    </div>
                    <fieldset class="position-absolute rounded" aria-hidden="true"></fieldset>
                  </div>
                </div>
                <p class="position-absolute warning"></p>
              </section>
              <section>
                <div class="position-relative input box">
                  <label for="password-repeat" class="position-absolute label" id="labelid">确认密码</label>
                  <div class="position-relative  d-flex">
                    <input id="password-repeat" class="flex-grow-1" type="password" name="password-repeat" onfocus="boxfocus(this)" onclick="boxfocus(this)" onblur="boxblur(this)">
                    <div class="hint text-white align-self-center d-flex justify-content-center align-items-center rounded position-relative" onclick="change(this)">        
                      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-eye-fill position-absolute d-none" viewBox="0 0 16 16">
                        <path d="M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0z"/>
                        <path d="M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8zm8 3.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z"/>
                      </svg>
                      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-eye-slash-fill position-absolute d-block" viewBox="0 0 16 16">
                        <path d="m10.79 12.912-1.614-1.615a3.5 3.5 0 0 1-4.474-4.474l-2.06-2.06C.938 6.278 0 8 0 8s3 5.5 8 5.5a7.029 7.029 0 0 0 2.79-.588zM5.21 3.088A7.028 7.028 0 0 1 8 2.5c5 0 8 5.5 8 5.5s-.939 1.721-2.641 3.238l-2.062-2.062a3.5 3.5 0 0 0-4.474-4.474L5.21 3.089z"/>
                        <path d="M5.525 7.646a2.5 2.5 0 0 0 2.829 2.829l-2.83-2.829zm4.95.708-2.829-2.83a2.5 2.5 0 0 1 2.829 2.829zm3.171 6-12-12 .708-.708 12 12-.708.708z"/>
                      </svg>
                    </div>
                    <fieldset class="position-absolute rounded" aria-hidden="true"></fieldset>
                  </div>
                </div>
                <p class="position-absolute warning"></p>
              </section>
              <section>
                <div class="position-relative input box">
                  <label for="email" class="position-absolute label" id="labelid">电子邮箱</label>
                  <div class="position-relative  d-flex">
                    <input id="email" class="flex-grow-1" type="email" name="email" onfocus="boxfocus(this)" onclick="boxfocus(this)" onblur="boxblur(this)">
                    <fieldset class="position-absolute rounded" aria-hidden="true"></fieldset>
                  </div>
                </div>
                <p class="position-absolute warning"></p>
              </section>

              <section>
                <div class="position-relative input box">
                  <label for="phonenumber" class="position-absolute label" id="labelid">手机号</label>
                  <div class="position-relative  d-flex">
                    <input id="phonenumber" class="flex-grow-1" type="number" name="phonenumber" onfocus="boxfocus(this)" onclick="boxfocus(this)" onblur="boxblur(this)">
                    <fieldset class="position-absolute rounded" aria-hidden="true"></fieldset>
                  </div>
                </div>
                <p class="position-absolute warning"></p>
              </section>

              <section class="align-self-start box">
                <input class="bg-transparent" type="checkbox" name="" id="information" onclick="boxblur(this)"><span class="text-light">我已阅读<a href="">注册须知</a></span>
              </section>
              <button class="btn btn-primary w-100 regestbutton" id="regest-button" onclick="regest()" disabled>
                立即注册
              </button>
 
            

            </div>
          </div>
        </main>

      </div>
    </div>
  </div>
</body>
</html>